<template>
    <el-container>
        <!-- 顶部 -->
        <!-- <el-header>
            顶部导航栏
            <div>
                <div>
                    <el-avatar shape="square" :size="large" :src="squareUrl"></el-avatar>
                    <span>&nbsp;&nbsp;&nbsp;xxx系统</span>
                </div>
                <div>
                    <span>测试</span>
                    <span>测试</span>
                    <span>测试</span>
                </div>
            </div>
        </el-header> -->
        <!-- 主体内容 -->
        <el-main>
            <div class="block">
                <el-slider vertical v-model="read.localPageLeft" :max="this.read.totalPage%2==0 ? this.read.totalPage - 1 : this.read.totalPage" :min="1">
                </el-slider>
            </div>
            <div>
                <div>
                    <!-- onerror="this.src='https://view.baocloud.cn:7090/bsview/upload-image/human.png';this.onerror=null;" -->
                    <img :src="agentPicture(this.read.pictureUrl[this.read.localPageLeft],(this.read.pyInfo == null ? '' : this.read.pyInfo.referer))" alt="加载中..." loading='lazy' :onerror="'this.src=' + '\'' + errorUrl +'\';'">
                    <img :src="agentPicture(this.read.pictureUrl[this.read.localPageLeft - 1],(this.read.pyInfo == null ? '' : this.read.pyInfo.referer))" alt="加载中..." loading='lazy' :onerror="'this.src=' + '\'' + errorUrl +'\';'">
                </div>
            </div>
            <div class="my-card-nav">
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-menu-item index="1">
                    <el-tooltip class="item" effect="dark" content="下一页" placement="left" hide-after="1000">
                        <el-button icon="el-icon-arrow-left" circle @click="turnNextPages()"></el-button>
                    </el-tooltip>
                </el-menu-item>
                <el-menu-item index="2">
                    <el-tooltip class="item" effect="dark" content="上一页" placement="left" hide-after="1000">
                        <el-button icon="el-icon-arrow-right" circle @click="turnPreviousPages()"></el-button>
                    </el-tooltip>
                </el-menu-item>
                <el-menu-item index="3">
                    <el-tooltip class="item" effect="dark" content="下一章" placement="left" hide-after="1000">
                        <el-button icon="el-icon-d-arrow-left" circle @click="turnNextChapter(read.pyId,read.nextChapterUrl)"></el-button>
                    </el-tooltip>
                </el-menu-item>
                <el-menu-item index="4">
                    <el-tooltip class="item" effect="dark" content="上一章" placement="left" hide-after="1000">
                        <el-button icon="el-icon-d-arrow-right" circle  @click="turnPreviousChapter(read.pyId,read.previousChapterUrl)"></el-button>
                    </el-tooltip>
                </el-menu-item>
                </el-menu>
            </div>
             <div class="my-card-nav">
                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    <el-tooltip class="item" effect="dark" content="左页 / 右页" placement="right" hide-after="1000">
                    <el-menu-item index="1">
                        {{(read.localPageLeft + 1 > this.read.totalPage ? ' ' : read.localPageLeft + 1) + ' / ' + (read.localPageLeft)}}
                    </el-menu-item>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="总页数 / 集数" placement="right" hide-after="1000">
                    <el-menu-item index="1">
                        {{this.read.totalPage}}P / {{this.read.name}}
                    </el-menu-item>
                    </el-tooltip>
                    </el-menu>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import LogoSrc from '@/assets/icon/comic.png'
import ReadLoading from '@/assets/read/loading.png'
import Api from '@/api/index';

export default {
  name: 'Detail',
  data () {
    return {
        read:{
            pyId: this.$route.query.id || this.$route.params.id, //pyId
            url: this.$route.query.url || this.$route.params.url, //url
            pyInfo: null, //py文件信息
            pictureUrl: [], //阅读漫画集合
            name: '',//当前漫画名称
            nextChapterUrl: '', //下一章url
            nextName: '', //下一章名
            previousChapterUrl: '', //上一章url
            previousName: '', //上一章名
            chapterUrl: '', //章节详细信息url
            title: '', //标题 
            // sliderValue: 1, //滑块
            // lock: true , //锁,用于翻页时改变同步滑块值时,不触发监听变量函数 true触发,false不触发
            localPageLeft: 1, //当前页
            // localPageRight: 2, //当前页右
            totalPage: 1, //总页数
        },
    //   msg: 'Welcome to Your Vue.js App',
    //   pictureUrl: 'https://i0.hdslb.com/bfs/bangumi/eb8a6af29cd78521ff0119f1488535146e1e7e7f.jpg@310w.jpg'
    //   errorUrl: 'https://i0.hdslb.com/bfs/manga-static/8ef251dc8bb4e6d5cabc33d033c23ef608e629ce.jpg@310w.jpg'
      errorUrl: ReadLoading

    }
  },
  methods: {
      //图片代理
      agentPicture(url,referer){
          let agentUrl = Api.APIROOT + '/agentController/forwardPicture?url=' + url + '&referer=' + referer
          return agentUrl
      },
      //跳转到阅读界面
      routerPushChapter(url,pyId){
          if(url.trim() == ''){
            this.$notify({
                  title: '错误',
                  message: '跳转失败',
                  position: 'bottom-left',
                  type: 'error'
              });
          }else{
            console.log("跳轉了" + url + "," + pyId)
            this.$router.push({path: '/read/' + pyId,
                                query: {
                                        url: url
                                    }
            }).catch(()=>{});
          }
      },
      //下一页,条页
      turnNextPages(){
          let pageIndex = this.read.localPageLeft + 2;
          if(pageIndex <= this.read.totalPage){
            this.read.localPageLeft = pageIndex
          }else{
              this.$message('已到达最后一页');
          }
      },
      //上一页
      turnPreviousPages(){
          let pageIndex = this.read.localPageLeft - 2;
          if(pageIndex + 1 >= 1){
            this.read.localPageLeft = pageIndex
          }else{
              this.$message('已到达第一页');
          }
      },
      //跳转章节
      turnChapter(pyId,url){
          //获取本url漫画阅读图片
          Api.getShellControllerPictureComicPageResource(pyId,url).then(response => {
              if(response.data.code == 200){
                  let data = response.data.data 
                  this.read.pictureUrl = data.pictureUrl
                  this.read.nextChapterUrl = data.nextChapterUrl
                  this.read.nextName = data.nextName
                  this.read.previousChapterUrl = data.previousChapterUrl
                  this.read.previousName = data.previousName
                  this.read.chapterUrl = data.chapterUrl
                  this.read.title = data.title
                  this.read.name = data.name
                  //初始化
                  this.read.localPageLeft =  0 //当前页
                  this.read.localPageRight = 1 //当前页右
                  this.read.totalPage = this.read.pictureUrl.length
              }
          })
      },
      //下一章
      turnNextChapter(pyId,url){
        if(this.read.nextChapterUrl == '****' && this.read.nextName == '****'){
            this.$message('已到达最后一章');
            return;
        }
        this.routerPushChapter(url,pyId)
        //获取本url漫画阅读图片
        Api.getShellControllerPictureComicPageResource(pyId,url).then(response => {
            if(response.data.code == 200){
                let data = response.data.data 
                this.read.pictureUrl = data.pictureUrl
                this.read.nextChapterUrl = data.nextChapterUrl
                this.read.nextName = data.nextName
                this.read.previousChapterUrl = data.previousChapterUrl
                this.read.previousName = data.previousName
                this.read.chapterUrl = data.chapterUrl
                this.read.title = data.title
                this.read.name = data.name
                //初始化
                this.read.localPageLeft =  0 //当前页
                this.read.localPageRight = 1 //当前页右
                this.read.totalPage = this.read.pictureUrl.length
            }
        })
      },
      //上一章
      turnPreviousChapter(pyId,url){
        if(this.read.previousChapterUrl == '****' && this.read.previousName == '****'){
            this.$message('已到达第一章');
            return;
        }
        this.routerPushChapter(url,pyId)
        //获取本url漫画阅读图片
        Api.getShellControllerPictureComicPageResource(pyId,url).then(response => {
            if(response.data.code == 200){
              let data = response.data.data 
              this.read.pictureUrl = data.pictureUrl
              this.read.nextChapterUrl = data.nextChapterUrl
              this.read.nextName = data.nextName
              this.read.previousChapterUrl = data.previousChapterUrl
              this.read.previousName = data.previousName
              this.read.chapterUrl = data.chapterUrl
              this.read.title = data.title
              this.read.name = data.name
              //初始化
              this.read.localPageLeft =  0 //当前页
              this.read.localPageRight = 1 //当前页右
              this.read.totalPage = this.read.pictureUrl.length
            }
        })
      }
  },
  mounted() {
      //判断用户登录状态,未登录则跳转到登录界面
      let token = this.$store.state.common.token;
      if(token == undefined || token == null || token == '' || token == 'null'){
        this.$router.push("/login");
        this.$message({
            type: 'warning',
            message: '尚未登录,请登录后使用'
        });
      }else{
        //获取爬取漫画信息
        //获取当前pyId的详细信息(主要获取 源 ,处理防盗链问题)
        Api.getMainPageControllerQueryCoSpiderInfoByIdResource(this.read.pyId).then(response => {
            this.read.pyInfo = response.data.data
            //获取搜索内容
            this.turnChapter(this.read.pyId,this.read.url)
        },error => {
            //获取搜索内容
            this.turnChapter(this.read.pyId,this.read.url)
        })
      }
  }
}
</script>

<style scoped>
.el-container{
    width: 100%;
    height: 100%;
    background-color: rgb(33, 33, 33);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;   
    justify-content: center;
    overflow: hidden;
}
/* 布局容器 */
.el-header{
    background-color: #000000;
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: 60px;
    padding: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;   
    justify-content: center;
    /* position: sticky; */
    /* top:0px; */
    position: absolute;
    top: 0px;
    min-width:1400px;
    /* right: calc(50% -); */
    width: 100%;
    z-index: 999;
    opacity: 0.5;
    /* box-shadow: 0px 0px 5px 1px rgb(211, 211, 211); */
}
.el-main {
    /* background-color: #E9EEF3; */
    color: #333;
    /* text-align: center; */
    /* line-height: 160px; */
    /* height: 100%; */
    padding: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;   
    justify-content: center;
    /* align-items: center; */
    width: 1160px;
    height: 100%;
    overflow: hidden;
}
/* 顶部栏 */
.el-header > div:first-child {
    width: 1160px;
    /* width: 70%; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;   
    justify-content: center;
}
/* .el-header * {
    color: #fffefe;
    background-color: #000000;
    border: #000000;
    border: 0px 0px 0px 0px;
}
.el-header *:hover{
    color: #fffefe !important;
    background-color: #000000 !important;
} */

.el-header > div:first-child > div:nth-child(1){
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;   
    justify-content: flex-start;
    align-items: center;
}
.el-header > div:first-child > div:nth-child(2){
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
    justify-content: flex-end;
}
.el-header > div:first-child > div:nth-child(2) > span{
    /* display: flex;
    flex-direction: row;
    flex-wrap: nowrap;  */
    margin: 0px 20px 0px 0px;
}
/**
* 阅读界面 
*/
.el-main > div{
    width: 1160px; 
    height: 100%;
    display: flex;
    justify-content: center;
}
.el-main > div > div{
    width: 1160px; 
    height: 100%;
    display: flex;
    justify-content: center;
}
.el-main > div > div > img{
    height: 100%;
    /* width: max-content;  */
    object-fit : contain;

}
.el-main > div:first-child{
    margin-top: 70px;
    width: 10%;
    height: 70%;
    color: #000000;
    /* padding: 0% 0% 10% 0%; */
    position: absolute;
    left: 0%;
    /* filter: brightness(50%) opacity(30%) grayscale(100%); */
    filter: invert(100%) grayscale(100%) ;
}
.el-main > div:nth-of-type(3){
    margin-bottom: 20px;
    width: 10%;
    height: min-content;
    color: #000000;
    /* padding: 0% 0% 10% 0%; */
    position: absolute;
    right: 0%;
    bottom: 0%;
    /* filter: brightness(50%)  opacity(30%) grayscale(100%) invert(100%); */
    filter: invert(90%) grayscale(100%);
}
.el-main > div:nth-of-type(4){
    margin-bottom: 20px;
    width: 10%;
    height: min-content;
    color: #000000;
    /* padding: 0% 0% 10% 0%; */
    position: absolute;
    left: 0%;
    bottom: 0%;
    /* filter: brightness(50%)  opacity(30%) grayscale(100%) invert(100%); */
    filter: invert(90%) grayscale(100%);
    text-align: center;
}
</style>
